<template>
  <div>
    <!-- 卡片视图 -->
    <el-card shadow="always">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运营</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>单位管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索框 -->
      <el-input
        style="width:280px;"
        placeholder="请输入单位名称"
        class="search"
        v-model="searchData"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>>
        <el-button slot="append" @click="searchBtn" :disabled="isDisabled"
          >搜索</el-button
        >
      </el-input>
      <el-button
        class="top-right-button"
        type="success"
        @click="addPage"
        >添加单位</el-button
      >
      <!-- 数据列表 -->
      <el-table :data="tableData" border>
        <el-table-column type="index" label="#" width="75"></el-table-column>
        <el-table-column prop="title" label="单位名称" min-width='150'></el-table-column>
        <el-table-column prop="users_name" label="默认代报员"></el-table-column>
        <el-table-column prop="users_phone" label="默认代报员联系方式"></el-table-column>
        <!-- <el-table-column prop="defaultExpenseCateId" label="默认sku"></el-table-column> -->
        <el-table-column prop="expenseCateCompanyPrice_daysNum" label="默认天数"></el-table-column>
        <el-table-column prop="expenseCateCompanyPrice_priceDel" label="默认划线价格(元)"></el-table-column>
        <el-table-column prop="expenseCateCompanyPrice_priceReal" label="默认真实价格(元)"></el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              content="设置默认代报员"
              placement="top"
              :enterable="false"
            >
              <el-button
                size="mini"
                type="primary"
                @click.stop="setDefDby(scope.row)"
              >
                <i class="el-icon-user" style="margin:0 auto"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="设置默认sku页"
              placement="top"
              :enterable="false"
            >
              <el-button
                size="mini"
                type="warning"
                @click.stop="setDefSku(scope.row)"
              >
                <i class="el-icon-setting" style="margin:0 auto"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="p"
        :page-sizes="[10, 20, 50, 80]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </el-card>

    <!-- 设置默认代报员 -->
    <el-dialog
      title="设置默认代报员"
      :visible.sync="setDefaultDialogVisible"
      width="40%"
      center
    >
      <el-form class="demo-ruleForm" label-width="50%" size="small">
          <el-form-item label="单位名称:">
              {{danweiData.title}}
          </el-form-item>
          <el-form-item label="默认代报员:">
              {{danweiData.users_name?danweiData.users_name:'无'}}
          </el-form-item>
          <el-form-item label="默认代报员联系方式:">
              {{danweiData.users_phone?danweiData.users_phone:'无'}}
          </el-form-item>
          <el-form-item label="可更换的代报员:" required>
              <el-select v-model="defdby" placeholder="请选择">
                  <el-option
                      v-for="item in canchangeList2"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="变更代报员联系方式:">
              {{defDbyphone}}
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setDefaultDialogVisible = false">取消</el-button>
        <el-button @click="trueSet" type="primary">确定</el-button>
      </span>
    </el-dialog>

    <!-- 设置默认sku页 -->
    <el-dialog
      title="设置默认sku"
      :visible.sync="setSkuDialogVisibl"
      width="50%"
      center
    > 
      <div class="set_sel1" @click="showSel1">
        {{selList[0].sel?selList[0].sel:"请选择"}}
        <div v-for="(item,index) in canchangeList" @click.stop="trueItem1(item,index)" :key="item.id" :class="['sel_item1',indexList.index1===index?'seld_item':'']">
          {{item.title}}
        </div>
      </div>
      <div class="set_sel1" @click="showSel2" v-if="selList[0].sel">
        {{selList[1].sel?selList[1].sel:"请选择"}}
        <div v-for="(item,index) in twoData" @click.stop="trueItem2(item,index)" :key="item.id" :class="['sel_item1',indexList.index2===index?'seld_item':'']">
          {{item.title}}
        </div>
      </div>
      <div class="set_sel1" @click="showSel3" v-if="selList[1].sel">
        {{selList[2].sel?selList[2].sel:"请选择"}}
        <div v-for="(item,index) in threeData" @click.stop="trueItem3(item,index)" :key="item.id" :class="['sel_item1',indexList.index3===index?'seld_item':'']">
          {{'天数:'+item.daysNum+'天，划线价格:'}}<del>{{'￥'+item.priceDel+'元'}}</del>，真实价格：{{"￥"+item.priceReal+'元'}}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setSkuDialogVisibl = false">取消</el-button>
        <el-button @click="subsku" type="primary">确定</el-button>
      </span>
    </el-dialog>

    <!-- 添加单位 -->
    <el-dialog
      title="添加单位"
      :visible.sync="addKindDialogVisibl"
      width="30%"
      center
      @close = 'addKindDialogVisiblclose'
    >
      <el-form label-width="100px" ref="AddFormRef" @submit.native.prevent>
        <el-form-item label="单位名称" prop="telInput" required>
            <input type="text" class="input_" v-model="danweiName">
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addKindDialogVisibl = false">取消</el-button>
        <el-button @click="trueAdd" type='primary'>确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get } from "../../../../../public/API/query";
import config from "../../../../../public/config";

export default {
  data() {
    return {
      //添加的单位
      danweiName:'',
      //更改的默认代报员id
      defdby:'',
      //点击行的数据
      danweiData:{},
      threeData:[],
      twoData:[],
      indexList:{index1:'',index2:'',index3:''},
      selList:[{sel:'',id:''},{sel:'',id:''},{sel:'',id:''}],
      //sku数据
      canchangeList:[],
      //变更代报员数据
      canchangeList2:[],
      eddefDby:[],
      //搜索
      searchData: "",
      //列表数据
      tableData: [],
      //查询参数
      p: 1,
      limit: 10,
      //总条数
      count: null,
      isDisabled: false,
      setDefaultDialogVisible: false,
      setSkuDialogVisibl: false,
      addKindDialogVisibl: false,
      subID:'',
      expenseCateCompanyPrice_id:null
    };
  },
  computed:{
    defDbyphone(){
      var phone
      for (const i in this.canchangeList2) {
        if (this.canchangeList2[i].id == this.defdby) {
            phone = this.canchangeList2[i].phone
        }
      }
      return phone
    }
  },
  methods: {
    trueSet(){
      get('operate/commodity/commounit/setInitErrandSub',{id:this.danweiData.id,users_id:this.defdby},res=>{
        if (res.code == 200) {
          this.getTableData()
          this.setDefaultDialogVisible = false
          this.$message.success('设置成功')
        }else{
          this.$message.error('设置失败')
        }
      })
    },
    cle(){
      this.threeData = []
      this.twoData = []
      this.indexList = {index1:'',index2:'',index3:''}
      this.selList = [{sel:'',id:''},{sel:'',id:''},{sel:'',id:''}]
    },
    trueItem3(value,index){
      this.indexList.index3 = index
      this.selList[2].sel = `天数:${value.daysNum}天,划线价格${value.priceDel},真实价格:${value.priceReal}元`
      this.selList[2].id = value.id
    },
    trueItem2(value,index){
      this.selList[2].sel = ''
      this.indexList.index3=''
      this.indexList.index2 = index
      this.selList[1].sel = value.title
      this.selList[1].id = value.id
      this.threeData = this.twoData[index]._child
    },
    trueItem1(value,index){
      this.selList[1].sel = ''
      this.indexList.index2=''
      this.indexList.index1 = index
      this.selList[0].sel = value.title
      this.selList[0].id = value.id

      this.twoData = this.canchangeList[index]._child?this.canchangeList[index]._child:[]
    },
    showSel3(target){
      target.target.className = target.target.className == 'set_sel1' ? 'set_sel2' : 'set_sel1'
    },
    showSel2(target){
      target.target.className = target.target.className == 'set_sel1' ? 'set_sel2' : 'set_sel1'
    },
    showSel1(target){
      target.target.className = target.target.className == 'set_sel1' ? 'set_sel2' : 'set_sel1'
    },
    //确定添加
    trueAdd(){
      get('operate/commodity/commounit/addSub',{title:this.danweiName},res=>{
        res.code == 200?this.$message.success('添加成功'):''
        this.addKindDialogVisibl = false
        this.getTableData()
      })
    },
    //添加页
    addPage(){
      get('operate/commodity/commounit/addPage',{},res=>{
        this.addKindDialogVisibl = true
      })
    },
    //设置sku页
    setDefSku(rowData){
      this.subID = rowData.id
      this.cle()
      get('operate/commodity/commounit/setInitSku',{id:rowData.id},res=>{
        this.canchangeList = res.data.tree
        this.setSkuDialogVisibl = true
      })
    },
    //设置默认代报员
    setDefDby(rowData){
      this.danweiData = rowData
      get('operate/commodity/commounit/setInitErrandPage',{id:rowData.id},res=>{
        res.code==200?this.setDefaultDialogVisible = true:''
        this.canchangeList2 = res.data.users
      })
    },
    // 获取列表数据
    getTableData(title) {
      let params = {
        p:this.p,
        limit:this.limit
      }
      if (title) {
        params.title = title
      }
      get('operate/commodity/commounit/index',params,res=>{
        this.tableData = res.data._list
        this.count = res.data.count
      })
    },
    // subsku
    subsku(){
       get('operate/commodity/commounit/setInitSkuSub',{id:this.subID,expenseCateCompanyPrice_id:this.selList[2].id},res=>{
           if(res.code == 200){
               this.$message.success('设置成功！')
               this.getTableData()
               this.setSkuDialogVisibl = false
               
           }
       })
    },
    addKindDialogVisiblclose(){
        this.danweiName = ''
    },


    handleSizeChange(newSize) {
      this.limit = newSize;
      this.getTableData();
    },
    handleCurrentChange(newPage) {
      this.p = newPage;
      this.getTableData();
    },
    //搜索功能
    searchBtn() {
      this.getTableData(this.searchData);
    },
  },
  watch: {
    searchData: function() {
      if (!this.searchData) {
        this.getTableData();
      }
      if (this.searchData) {
        this.isDisabled = false;
      }
    },
  },

  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
.set_sel1,.set_sel2{
  width:80%;
  max-height: 35px;
  border-radius: 5px;
  color: dimgray;
  border: 1px solid #DCDFE6;
  line-height: 33px;
  padding-left: 10px;
  position: relative;
  transition: .1s;
  user-select: none;
  margin: auto;
  overflow: hidden;
  &::before{
    content: "";
    position: absolute;
    right: 10px;
    top: 11.5px;
    // background-color: red;
    background: url('../../../../assets/images/上.png') no-repeat center center;
    width: 20px;
    height: 10px;
  }
}
.seld_item{
  background: cornsilk;
}
.sel_item1{
  padding-left: 10px;
  &:hover{
    background: cornsilk;
  }
}
.set_sel2{
  max-height: 1000px;
}
.set_sel2::before{
  transform: rotate(90deg);
}
.el-breadcrumb {
  margin-bottom: 30px;
}
.el-input {
  margin-bottom: 30px;
  width: 280px;
  margin-right: 30px;
}
.el-pagination {
  margin-top: 30px;
}
.addRulesWrap {
  margin-left: 80px;
}
.addRules {
  position: absolute;
  right: 25%;
  bottom: 5%;
}
.disable {
  margin-left: 15px;
}
.dialog-warp {
  width: 100%;
  display: flex;
  justify-content: center;
}
.top-right-button {
  margin-left: 60%;
}
</style>
